<template>
    <div class="indexLayout">
       
       <div class="flex items-center justify-between px-[10px]">
            <Tabs v-model:active="active">
                <Tab :title="item.title" v-for="(item, index) in list" :key="index"></Tab>
            </Tabs>
            <img src="@img/more.png" alt="" class="w-[32px] h-[32px]" @click="routerPath('messageType')">
       </div>
        <Swipe :autoplay="3000" lazy-render>
            <SwipeItem v-for="image in images" :key="image">
                <img :src="image" />
            </SwipeItem>
        </Swipe>
        <div class="px-[30px] listHeight">
            <PullRefresh v-model="listData.refreshing" @refresh="onRefresh">
                <List
                    v-model:loading="listData.loading"
                    :finished="listData.finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                >
                    <TextItem v-for="item in listData.list" :key="item" :listItem="item" @click="routerPath('detail',{type:'message'})"  />
                </List>
            </PullRefresh>
        </div>
    </div>
</template>
<script setup>
import { Tab, Tabs, Swipe, SwipeItem ,PullRefresh,List } from 'vant';
import { ref,reactive } from 'vue';
import TextItem from '@/components/text.vue';
import {routerPath} from '@/router'
import lunbo1 from '@img/lunbo1.png'
const active = ref();
const listData = reactive({
    finished:false,
    refreshing:false,
    loading :false,
    list:[]
})
let list = [
    { title: '政策法规 体制改革' },
    { title: '医政医管 药物' },
    { title: '基层卫生 科教宣传' },
    { title: '疾病预防 应急管理' },
    { title: '中医药' },
    { title: '人口家庭 妇幼健康' },
    { title: '规划信息化 医养健康' },
    { title: '综合监管' },
    { title: '人事党务' },
    { title: '财务审计' },
    { title: '其他分类' },
]
let images = [
lunbo1,lunbo1,lunbo1
]

const onLoad = () => {
    setTimeout(() => {
    if (listData.refreshing) {
        listData.list = [];
        listData.refreshing = false;
    }

    for (let i = 0; i < 10; i++) {
        listData.list.push({
            title:'关于举办山东省病案质量分析与编码实操质量分析与编码实操远程培训的通知',
            date:'2023-07-03  19:35:20    '
        });
    }
    listData.loading = false;

    if (listData.list.length >= 40) {
        listData.finished = true;
    }
    }, 1000);
};

// 清空列表数据
const onRefresh =() =>{
      // 清空列表数据
      listData.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      listData.loading = true;
      onLoad();
}

</script>
<style scoped lang="scss">
.indexLayout:deep(.van-tabs__wrap) {
    width: 90vw;
    .van-tabs__nav--complete{
        padding-left: 0;
    }
    .van-tab--grow{
        padding: 0 15px;
    }
    .van-tab--active {
        color: rgba(24, 120, 241, 1);
        font-weight:normal;
    }
   
    .van-tabs__line{
        height: 3px;
    }
}
.indexLayout:deep(.van-swipe){
    .van-swipe-item{
        img{
            width: 100%;
            height: 260px;
        }
    }
}
.listHeight{
    height: calc(100vh - 600px);
    overflow-y: auto;
}
</style>